<template>
  <el-dialog
    title="领用详情"
    :visible="moreDialog"
    width="60%"
    @close="$emit('close')"
    append-to-body
  >
    <!-- 进度 -->
    <el-steps simple :active="activeStatus" align-center>
      <el-step title="待审批" icon="el-icon-edit" />
      <!-- <el-step
        v-for="(item, i) in info.reviewer"
        :key="i"
        icon="el-icon-edit"
        :title="`${item.name}审核`"
        :description="item.resone"
      /> -->
      <el-step
        icon="el-icon-edit"
        :title="`${info.auditName}审核`"
        :description="info.auditNote"
      />
      <el-step
        v-if="info.status === 1"
        icon="el-icon-circle-close"
        title="未通过"
      />
      <el-step
        v-else-if="info.status === 2 || info.status === 0"
        icon="el-icon-success"
        title="已通过"
      />
      <el-step
        v-else-if="info.status === 3"
        icon="el-icon-success"
        title="已取消"
      />
    </el-steps>
    <!-- 未通过原因 -->
    <div v-if="info.status === 1" class="reason">
      <span>未通过原因:</span>
      <div>
        <span>{{ info.auditName }}:</span>
        <div>
          {{ info.auditNote || "无" }}
        </div>
      </div>
    </div>

    <!-- 预约信息 -->
    <div class="info">
      <div>
        <span>预约实验室:</span>
        <div>{{ info.labName }}</div>
      </div>
      <div>
        <span>预约时间:</span>
        <div class="date">{{ info.times[0].start | formatDate }}:</div>
        <div class="time">
          <div v-for="(item, i) in info.times" :key="i">
            <span>{{ item.start | formatTime }}</span> -
            <span>{{ item.end | formatTime }}</span>
          </div>
        </div>

      </div>
      <div>
        <span>备注:</span>
        <div>{{ info.note || "无" }}</div>
      </div>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="$emit('close')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    moreDialog: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    activeStatus() {
      if (this.info.status === 0) {
        return 1
      } else {
        return 3
      }
    }
  },

  created() {},

  methods: {}
}
</script>

<style scoped lang="scss">
.el-step.is-simple ::v-deep .el-step__title {
  font-size: 14px;
}
.date {
  margin-right: 10px;
}
.reason {
  font-size: 14px;
  padding: 5px;
  margin-top: 10px;
  background-color: #f5f7fa;
  min-height: 50px;
  > div {
    display: flex;
    padding: 10px;
    span {
      text-align: right;
      margin-right: 15px;
    }
  }
}
.info {
  margin-top: 15px;
  background-color: #f5f7fa;
  > div {
    padding: 10px;
    display: flex;
    span {
      width: 120px;
      text-align: right;
      margin-right: 15px;
    }
  }
.time {
  display: flex;
  flex-direction: column;
  span {
    margin: 0;
  }
}

}
</style>
